<template>
	<view class="content">
		<view class="head-fixed ">
			<view class="fiexd-item">
				<view class="head-tab " :style="[{height:CustomBar + 'px'}]">
					<view class="view flex align-center" :style="style">
						<view class="back cuIcon-back  middle">

						</view>
						<view class="search-boxx flex align-center justify-between">

							<input type="text" value="" placeholder="请输入社团名称以搜索" />

							<text class="cuIcon-search"></text>

						</view>

					</view>

				</view>
				
				<scroll-view scroll-x="true" class="scroll-view-box ">
					<view class="scroll-view flex align-center">
						<view class="scroll-view-item " v-for="(tab,index) in taber" :key="index"
							@click="changeTab(index)" :class="tabIndex==tab.type?'hover':'nohover'">
							{{tab.name}}
						</view>

					</view>
				</scroll-view>

			</view>

		</view>

		<mescroll-body bottom="20%" class=" " ref="mescrollRef" :down="downOption" @init="mescrollInit"
			@up="upCallback">

			<view class="scroll-view-list">


				<view class="box flex flex-wrap">
					<view class="item flex" v-for="(li,i) in list" :key="i">
						<image :src="res+li.img" class="" mode="aspectFill"></image>
						<view class="right  flex flex-direction ">
							<text class="title text-cut">{{li.title}}</text>
							<text class="guangzhu">789人关注</text>
						</view>

					</view>
				</view>

			</view>
		</mescroll-body>


	</view>

</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	import {
		getshetuanList
	} from "../../static/shetuan/api.js"
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				title: "",
				tabIndex: 0,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				res: this.apiHost + "/static/otherApp/",
				taber: [{
						name: "全部社团",
						type: 0

					},
					{
						name: "理论学习类",
						type: 1

					},
					{
						name: "社会公益类",
						type: 2
					},
					{
						name: "学术科研类",
						type: 3
					},
					{
						name: "体育赛事类",
						type: 4
					},
					{
						name: "IT技术类",
						type: 5
					}


				],
				list: [],
				downOption: {
					use: false
				},
				upOption: {
					page: {
						num: 0,
						size: 15
					},
					noMoreSize: 4,
					empty: {
						tip: '~ 搜索无数据 ~',
						btnText: '',
						textNoMore: '-- 没有更多了 --'
					},
					isBounce: true
				},
			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		methods: {
			changeTab(i) {
				this.tabIndex = i;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			/**
			 * 
			 */
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			upCallback(page) {
				getshetuanList(page.num, page.size, this.taber[this.tabIndex].type).then(curPageData => {

					this.mescroll.endSuccess(curPageData.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(curPageData);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		$w: calc(100vw*(710/750));

		.head-fixed {
			position: relative;
			min-height: calc(100vw*(220/750));

			.fiexd-item {
				position: fixed;
				z-index: 99;
				height: calc(100vw*(200/750));
				background-color: #F7F7F7;

				.head-tab {
					margin-top: 10rpx;
					width: 100vw;

					.view {
						.cuIcon-back {
							height: inherit;
							margin-left: calc(100vw*(40/750));
							font-size: calc(100vw*(40/750));
							margin-top: 6rpx;
							color: #333333;
						}

						height: inherit;

						.search-boxx {

							margin-left: 19rpx;
							width: calc(100vw*(400/750));
							height: calc(100vw*(72/750));
							background: #FFFFFF;
							box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
							border-radius: 20rpx;
							padding: 0 22rpx 0 42rpx;

							input {

								color: #999999;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
							}
						}

					}

				}

				.scroll-view-box {
					width: 100vw;
					height: calc(100vw*(100/750));

					.scroll-view {
						font-family: PingFang SC;
						height: calc(100vw*(100/750));
						margin-right: 20rpx;

						.scroll-view-item {
							margin-left: 45rpx;
							white-space: nowrap;
						}

						.hover {
							font-size: 32rpx;
							font-weight: 800;
							color: #333333;
						}

						.nohover {
							font-size: 28rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}

			}
		}


		.scroll-view-list {
			width: 100vw;

			image {
				width: $w;
				margin-left: calc(100vw*(24/750));
			}

			.box {
				.item {
					width: calc(100vw*(341/750));
					height: calc(100vw*(160/750));
					background: #FFFFFF;
					box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
					border-radius: 20rpx;
					margin-left: calc(100vw*(24/750));
					margin-top: 20rpx;
					padding: 20rpx;

					image {
						width: calc(100vw*(120/750));
						height: calc(100vw*(120/750));
						border-radius: 20rpx;
					}

					.right {
						margin-left: 13rpx;
						width: calc(100vw*(171/750));

						.title {
							font-size: 28rpx;
							font-weight: 800;
							color: #1270E0;
							line-height: 62rpx;
						}

						.guangzhu {
							font-size: 20rpx;
							font-weight: 500;
							color: #999999;
							margin-top: 19rpx;
						}
					}

				}

			}


		}

	}
</style>
